<template>
  <div>
    <div class="box" v-for="item in detailList" :key="item.id">
      <h3 class="title">{{item.title}}</h3>
      <p class="subtitle">
        <span>发表时间：{{item.add_time| formDate}}</span>
        <span>点击了{{item.click}}次</span>
      </p>
      <hr />
      <div class="content" v-html="item.content">{{item.content}}</div>
      <h3>发表评论</h3>
      <hr />
      <textarea class="textbox" placeholder="请输入要BB的内容（做多吐槽120字" maxlength="120" v-model="comment"></textarea>
      <van-button type="info" @click="addCritical">发表评论</van-button>
      <!-- 用户评论 -->
      <div v-for="(item, index) in critical" :key="index">
        <div class="username">第{{index+1}}楼 用户：{{item.user_name}} 发表时间：{{item.add_time | formDate}}</div>
        <div class="content">{{item.content}}</div>
      </div>
      <van-button type="info" @click="add">点击加载</van-button>
    </div>
  </div>
</template>

<script>
import { log } from "util";
export default {
  data() {
    return {
      detailList: [],
      critical: [],
      artId: "",
      comment: "",
      pageindex: 1
    };
  },

  methods: {
    async godetail() {
      this.artId = this.$route.params.id;
      var { data: res } = await this.axios.get(`/api/getnew/${this.artId}`);
      console.log(res);
      if (res.status !== 0) {
        return this.$toast.fail("服务器异常");
      }
      this.detailList = res.message;
      console.log(this.detailList);

      var { data: res } = await this.axios.get(
        `/api/getcomments/${this.artId}?pageindex=${this.pageindex}`
      );
      console.log(res);
      if (res.status == 0) {
        this.critical = res.message;
        console.log(this.critical);
      }
    },
    // 点击发表评论
    async addCritical() {
      if (this.comment.trim() == '') {
        this.$toast("请输入评论内容");
      } else {
        var { data: res } = await this.axios.post(
          `/api/postcomment/${this.artId}`,
          { content: this.message }
        );
        if (res.status != 0) return this.$toast("服务器异常");
        this.$toast("评论成功");
        this.comment = "";
        this.godetail();
      }
    },
    // 点击更多
    async add() {
      this.pageindex++;
      const {data:res} = await this.axios.get(
        `api/getcomments/${this.artId}?pageindex=${this.pageindex}`
      );
      console.log(res);

      if (res.status != 0) return this.$toast("服务器异常");
      this.critical.push(...res.message)
    console.log(this.pageindex);
    
    }
    // 评论
  },

  created() {
    this.godetail();
  }
};
</script>

<style lang='less' scoped>
.box {
  margin-bottom: 50px;
}
.title {
  margin: 15px;
  color: red;
  text-align: center;
}
.subtitle {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #226aff;
}
.textbox {
  line-height: 21px;
  width: 100%;
  font-size: 14px;
  height: 85px;
  padding: 15px;
}
.van-button {
  width: 100%;
  border-radius: 5px;
  color: #ffffff;
}
.username {
  background-color: #ccc;
  font-size: 14px;
}
</style>
